(function(window) {
	let YUPopup = function(options) {
		//初始化
		this.init(options, options)
	}
	//初始化函数
	YUPopup.prototype = {
		init({
			headerContent = '',
			content = '',
			header = true,
			showIcon = true,
			documentId = '',
			inputTypeUser = '',
			inputNameUser = '',
			documentWidth = '',
			documentHeight = '',
			isLogin = '',
			Shadow = true,
			inputTypePwd = 'password',
			inputNamePwd = '',
			formName = 'YUform',
			btnName = ["确定", "取消"] //按钮文字内容
		}, options) {
			this.thats = options //全局参数

			this.content = content
			this.documentWidth = documentWidth //宽度
			this.isLogin = isLogin //是否需要登录框
			this.documentHeight = documentHeight //高度
			this.formName = formName //表单名称
			this.headerContent = headerContent //用户内容
			this.header = header //是否显示头部信息及关闭按钮
			this.Shadow = Shadow //是否显示头部信息及关闭按钮

			this.showIcon = showIcon //是否展示弹窗图标
			this.documentId = documentId //用户传的id
			this.inputTypeUser = inputTypeUser //表单用户名输入框类型
			this.inputNameUser = inputNameUser //表单用户名输入框name
			this.inputTypePwd = inputTypePwd //表单用户密码输入框类型
			this.inputNamePwd = inputNamePwd //表单用户密码输入框name
			this.btnName = btnName //按钮文字内容

			// this._show({
			// 	el: this._el,
			// 	overlay: this._overlay
			// });
			// //绑定事件处理函数
			// this._bind({
			// 	el: this._el,
			// 	overlay: this._overlay
			// });
			//创建元素
			this.createdDocumentBefore()
			this.createdDocumentBegin()
			this._show({
				el: this._el,
				overlay: this._overlay
			});

		},
		createdDocumentBefore() {
			if (this.documentId) {
				var userDomId = document.getElementById(this.documentId)
				if (!userDomId) {
					throw new Error("请检查页面上是否有名为 '" + this.documentId + "'id 的元素");
					return false;
				} else {
					// var returnDom = this.createdDocumentBegin()
					// userDomId.appendChild(returnDom)
				}
			} else {
				// var body = document.body; //获取body对象
				// var returnDom = this.createdDocumentBegin()
				// body.insertBefore(returnDom, body.lastChild); //动态插入到body中
			}
		},
		_show({
			el,
			overlay
		}) {
			if (this.documentId) {
				var userDomId = document.getElementById(this.documentId)
				console.log(userDomId)
				// if (!userDomId) {
				// 	throw new Error("请检查页面上是否有名为 '" + this.documentId + "'id 的元素");
				// 	return false;
				// } else {
				this.createdDocumentBegin()
				// var returnDom = this.createdDocumentBegin()
				userDomId.appendChild(overlay)
				userDomId.appendChild(el)
				// }
			} else {
				// var body = document.body; //获取body对象
				// var returnDom = this.createdDocumentBegin()
				// body.insertBefore(el, body.lastChild); //动态插入到body中
				// this.createdDocumentBegin()
				document.body.appendChild(overlay);
				document.body.appendChild(el);
			}
		},
		isHeader() {
			var that = this
			var oDivHeader = document.createElement('div');
			oDivHeader.className = 'YU-Dialog-header'
			var oSpanHeaderTitle = document.createElement('span');
			oSpanHeaderTitle.className = 'YU-Dialog-header-title'
			oSpanHeaderTitle.innerHTML = this.headerContent
			var oSpanHeaderClose = document.createElement('span');
			oSpanHeaderClose.className = 'YU-Dialog-header-close'
			oSpanHeaderClose.style.backgroundImage = 'url(./icon/close_off.png)'
			oSpanHeaderClose.style.backgroundSize = "cover"; //设置背景图像的尺寸
			// oSpanHeaderClose.innerHTML = '<img style="width: 100%;" src="./icon/close_off.png" />'
			oSpanHeaderClose.onmouseover = function() {

				oSpanHeaderClose.style.backgroundImage = 'url(./icon/close_on.png)'
				oSpanHeaderClose.style.backgroundSize = "cover"; //设置背景图像的尺寸
				// oSpanHeaderClose.innerHTML = '<img style="width: 100%;" src="./icon/close_on.png" />'
			}
			oSpanHeaderClose.onmouseout = function() {
				oSpanHeaderClose.style.backgroundImage = 'url(./icon/close_off.png)'
				oSpanHeaderClose.style.backgroundSize = "cover"; //设置背景图像的尺寸
				// oSpanHeaderClose.innerHTML = '<img style="width: 100%;" src="./icon/close_off.png" />'
			}

			// console.log(that.thats)
			oSpanHeaderClose.onclick = function() {
				// console.log(that.thats)
				for (Key in that.thats) {
					if (that.thats[Key].name && that.thats[Key].name == 'closeYUPopup') {
						that.removeDom()
						that.thats[Key]()
					}
				}
			}

			oDivHeader.appendChild(oSpanHeaderTitle)
			oDivHeader.appendChild(oSpanHeaderClose)
			return oDivHeader
		},
		removeDom() {
			console.log(this._el)
			console.log(this._overlay)
			document.body.removeChild(this._overlay);
			document.body.removeChild(this._el);
			// if (this._el) {
			// }
			// console.log(123)
			// var uuu = document.getElementById("YU-Dialog")
			// console.log(uuu)
			// this.YUPopup.remove();
		},
		isShadow() {
			var oDivShadow = document.createElement('div');
			oDivShadow.className = 'YU-Dialog-Shadow'
			return oDivShadow
		},
		isContent() {
			var oDivContent = document.createElement('div');
			oDivContent.className = 'YU-Dialog-contianer'
			oDivContent.innerHTML = this.content
			return oDivContent
		},
		isBtnName() {
			var oDivBtnName = ''
			var that = this
			var oDivBtnNameFinally = document.createElement('div');
			oDivBtnNameFinally.className = 'YU-Dialog-footer'
			for (let i = 0; i < this.btnName.length; i++) {
				oDivBtnName = document.createElement('button');
				oDivBtnName.className = 'YU-Dialog-button-name'
				// oDivBtnNameSpan = document.createElement('span');
				// oDivBtnNameSpan.innerHTML = this.btnName[i]
				// oDivBtnNameSpan.setAttribute("type", 'button')
				// oDivBtnName.innerHTML = oDivBtnNameSpan
				oDivBtnName.innerHTML = this.btnName[i]
				oDivBtnName.setAttribute("data-YUindex", i)
				oDivBtnName.addEventListener('click', function(e) {

					var str = 'btn' + ((e.srcElement.getAttribute("data-YUindex") * 1) + 1)
					
						// console.log(that)
					if (that.isLogin) {
						// console.log(str)
						for (Key in that.thats) {
							// if(str == 'btn1'){
							// var form = document.getElementsByName(that.formName)[0][0]
							// console.log(form)
							// console.log(obj)
							// console.log(document.getElementsByName(that.formName))
							// }else{

							if (that.thats[Key].name && that.thats[Key].name == str) {
								if (str == 'btn1') {
									var obj = {
										username: document.getElementsByName(that.formName)[0][0].value,
										password: document.getElementsByName(that.formName)[0][1].value,
									}
									// console.log(obj)
									that.thats[Key](obj)
								} else if (str == 'btn2') {
									that.removeDom()
									that.thats[Key]()
								} else {
									that.thats[Key]()
								}
							}
						}
					} else {
						for (Key in that.thats) {
							if (that.thats[Key].name && that.thats[Key].name == str) {
								if (str == 'btn1') {
									that.thats[Key]()
								} else if (str == 'btn2') {
									that.removeDom()
									that.thats[Key]()
								} else {
									that.thats[Key]()
								}
							}

						}
					}
				})
				oDivBtnNameFinally.appendChild(oDivBtnName)
			}
			return oDivBtnNameFinally
		},
		createdDocumentBegin() {
			//创建外部div
			var oDivBox = document.createElement('div');
			oDivBox.className = 'YU-Dialog'
			// oDivBox.id = 'YU-Dialog'
			var oDiv = document.createElement('div');
			oDiv.className = 'YU-Dialog-oDiv'
			oDiv.style.width = this.documentWidth + 'px'
			oDiv.style.height = this.documentHeight + 'px'

			//判断是否显示弹窗标题
			var headerHTML = ''
			if (this.header) {
				headerHTML = this.isHeader()
			}
			//判断是否显示阴影
			var ShadowHTML = ''
			if (this.Shadow) {
				ShadowHTML = this.isShadow()

				this._overlay = ShadowHTML
			}
			//判断是否显示内容
			var ContentHTML = ''
			if (this.content !== '') {
				ContentHTML = this.isContent()
			} else {
				var oSpans = document.createElement('span');
				ContentHTML = oSpans
			}
			//判断按钮是否合格
			var FooterBtnName = ''
			if (this.btnName && (this.btnName instanceof Array)) {
				FooterBtnName = this.isBtnName()
				// console.log(FooterBtnName)
			} else {
				throw new Error("btnName 接收的是一个数组类型的参数，请检查数据类型");
			}
			//创建表单盒子
			var formBox = document.createElement("div");
			formBox.className = 'YU-Dialog-content'
			var isLogin = ''
			if (this.isLogin) {

				//创建表单
				var form = document.createElement("form");
				// console.log(this.formName)
				form.setAttribute("name", this.formName);
				form.setAttribute("class", 'YU-Dialog-form');

				//创建用户名输入框外部div
				var userNameDiv = document.createElement('div');
				userNameDiv.className = 'YU-Dialog-userName'

				//创建用户名输入框
				var userName = document.createElement("input");
				userName.className = 'YU-Dialog-userName-input'
				userName.setAttribute("type", this.inputTypeUser);
				userName.setAttribute("name", this.inputNameUser);

				//加入页面
				userNameDiv.appendChild(userName)

				//创建用户密码输入框外部div
				var userPwdDiv = document.createElement('div');
				userPwdDiv.className = 'YU-Dialog-userPassword'
				//创建用户密码输入框
				var userPwd = document.createElement("input");
				userPwd.className = 'YU-Dialog-userPassword-input'
				userPwd.setAttribute("type", this.inputTypePwd);
				userPwd.setAttribute("name", this.inputNamePwd);

				//加入页面
				userPwdDiv.appendChild(userPwd)

				form.appendChild(userNameDiv)
				form.appendChild(userPwdDiv)
				formBox.appendChild(form)
			}
			headerHTML ? oDiv.appendChild(headerHTML) : ''

			oDiv.appendChild(formBox)
			// console.log(ContentHTML)
			oDiv.appendChild(ContentHTML)
			oDivBox.appendChild(ShadowHTML)

			FooterBtnName ? oDiv.appendChild(FooterBtnName) : ''
			oDivBox.appendChild(oDiv)
			// console.log(oDiv)
			this._el = oDiv
			return oDivBox
		}
	}
	window.YUPopup = YUPopup;
})(window)
